<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>微信小程序 | donyyang blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="MINA&amp;#x7A0B;&amp;#x5E8F;&amp;#x5305;&amp;#x542B;&amp;#x4E00;&amp;#x4E2A;&amp;#x63CF;&amp;#x8FF0;&amp;#x6574;&amp;#x4F53;&amp;#x7A0B;&amp;#x5E8F;&amp;#x7684;app&amp;#x548C;&amp;#x591A;&amp;#x4E2A;&amp;#x63CF;&amp;#x8FF0;&amp;#x5404;&amp;#x81EA;&amp;#x9875;&amp;#x9762;&amp;#x7684;page&amp;#x30">
<meta property="og:type" content="article">
<meta property="og:title" content="微信小程序">
<meta property="og:url" content="http://yoursite.com/2016/10/12/微信小程序/index.html">
<meta property="og:site_name" content="donyyang blog">
<meta property="og:description" content="MINA&amp;#x7A0B;&amp;#x5E8F;&amp;#x5305;&amp;#x542B;&amp;#x4E00;&amp;#x4E2A;&amp;#x63CF;&amp;#x8FF0;&amp;#x6574;&amp;#x4F53;&amp;#x7A0B;&amp;#x5E8F;&amp;#x7684;app&amp;#x548C;&amp;#x591A;&amp;#x4E2A;&amp;#x63CF;&amp;#x8FF0;&amp;#x5404;&amp;#x81EA;&amp;#x9875;&amp;#x9762;&amp;#x7684;page&amp;#x30">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://yoursite.com/2016/10/12/微信小程序/page6.png">
<meta property="og:image" content="http://yoursite.com/2016/10/12/微信小程序/page7.png">
<meta property="og:image" content="http://yoursite.com/2016/10/12/微信小程序/page1.png">
<meta property="og:image" content="http://yoursite.com/2016/10/12/微信小程序/page2.png">
<meta property="og:image" content="http://yoursite.com/2016/10/12/微信小程序/page3.png">
<meta property="og:image" content="http://yoursite.com/2016/10/12/微信小程序/page4.png">
<meta property="og:image" content="http://yoursite.com/2016/10/12/微信小程序/page5.png">
<meta property="og:image" content="http://yoursite.com/2016/10/12/微信小程序/page8.png">
<meta property="og:image" content="http://yoursite.com/2016/10/12/微信小程序/page9.png">
<meta property="og:image" content="http://yoursite.com/2016/10/12/微信小程序/page10.png">
<meta property="og:image" content="http://yoursite.com/2016/10/12/微信小程序/page11.png">
<meta property="og:image" content="http://yoursite.com/2016/10/12/微信小程序/page12.png">
<meta property="og:image" content="http://yoursite.com/2016/10/12/微信小程序/page13.png">
<meta property="og:image" content="http://yoursite.com/2016/10/12/微信小程序/page14.png">
<meta property="og:updated_time" content="2016-10-14T01:08:45.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="微信小程序">
<meta name="twitter:description" content="MINA&amp;#x7A0B;&amp;#x5E8F;&amp;#x5305;&amp;#x542B;&amp;#x4E00;&amp;#x4E2A;&amp;#x63CF;&amp;#x8FF0;&amp;#x6574;&amp;#x4F53;&amp;#x7A0B;&amp;#x5E8F;&amp;#x7684;app&amp;#x548C;&amp;#x591A;&amp;#x4E2A;&amp;#x63CF;&amp;#x8FF0;&amp;#x5404;&amp;#x81EA;&amp;#x9875;&amp;#x9762;&amp;#x7684;page&amp;#x30">
<meta name="twitter:image" content="http://yoursite.com/2016/10/12/微信小程序/page6.png">
  
    <link rel="alternative" href="/atom.xml" title="donyyang blog" type="application/atom+xml">
  
  
    <link rel="icon" href="/img/body.jpeg">
  
  
      <link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css">
  
  
      <link href="//cdn.bootcss.com/jqueryui/1.10.4/css/jquery-ui.min.css" rel="stylesheet">
  
  <link rel="stylesheet" href="/css/style.css">
  
  <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  
  
    <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  
  <script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
  <script>
      var yiliaConfig = {
          fancybox: true,
          animate: true,
          isHome: false,
          isPost: true,
          isArchive: false,
          isTag: false,
          isCategory: false,
          open_in_new: false,
      }
  </script>

  
      <script>
          yiliaConfig.rootUrl = "/";
      </script>
  

  
</head>
<body>
  <div id="container">
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
    <header id="header" class="inner">
        <a href="/" class="profilepic">
            <img src="/img/body.jpeg" class="animated zoomIn">
        </a>
        <hgroup>
          <h1 class="header-author"><a href="/">donyyang</a></h1>
        </hgroup>

        
                


        
            <div id="switch-btn" class="switch-btn">
                <div class="icon">
                    <div class="icon-ctn">
                        <div class="icon-wrap icon-house" data-idx="0">
                            <div class="birdhouse"></div>
                            <div class="birdhouse_holes"></div>
                        </div>
                        <div class="icon-wrap icon-ribbon hide" data-idx="1">
                            <div class="ribbon"></div>
                        </div>
                        
                        <div class="icon-wrap icon-link hide" data-idx="2">
                            <div class="loopback_l"></div>
                            <div class="loopback_r"></div>
                        </div>
                        
                        
                        <div class="icon-wrap icon-me hide" data-idx="3">
                            <div class="user"></div>
                            <div class="shoulder"></div>
                        </div>
                        
                    </div>
                    
                </div>
                <div class="tips-box hide">
                    <div class="tips-arrow"></div>
                    <ul class="tips-inner">
                        <li>菜单</li>
                        <li>标签</li>
                        
                        <li>友情链接</li>
                        
                        
                        <li>关于我</li>
                        
                    </ul>
                </div>
            </div>
        

        <div id="switch-area" class="switch-area">
            <div class="switch-wrap">
                <section class="switch-part switch-part1">
                    <nav class="header-menu">
                        <ul>
                        
                            <li><a href="/">主页</a></li>
                        
                            <li><a href="/archives/">所有文章</a></li>
                        
                            <li><a href="/tags/">标签云</a></li>
                        
                            <li><a href="/about/">关于我</a></li>
                        
                        </ul>
                    </nav>
                    <nav class="header-nav">
                        <ul class="social">
                            
                                <li id="Email"><a class="Email" target="_blank" href="mailto:123@123.com" title="Email"></a></li>
                            
                                <li id="GitHub"><a class="GitHub" target="_blank" href="#" title="GitHub"></a></li>
                            
                                <li id="RSS"><a class="RSS" target="_blank" href="/atom.xml" title="RSS"></a></li>
                            
                        </ul>
                    </nav>
                </section>
                
                
                <section class="switch-part switch-part2">
                    <div class="widget tagcloud" id="js-tagcloud">
                        
                    </div>
                </section>
                
                
                
                <section class="switch-part switch-part3">
                    <div id="js-friends">
                    
                      <a target="_blank" class="main-nav-link switch-friends-link" href="https://hexo.io">Hexo</a>
                    
                      <a target="_blank" class="main-nav-link switch-friends-link" href="https://pages.github.com/">GitHub</a>
                    
                      <a target="_blank" class="main-nav-link switch-friends-link" href="http://moxfive.xyz/">MOxFIVE</a>
                    
                    </div>
                </section>
                

                
                
                <section class="switch-part switch-part4">
                
                    <div id="js-aboutme">陌上人如玉，公子世无双</div>
                </section>
                
            </div>
        </div>
    </header>                
</div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
      <div class="overlay">
          <div class="slider-trigger"></div>
          <h1 class="header-author js-mobile-header hide"><a href="/" title="回到主页">donyyang</a></h1>
      </div>
    <div class="intrude-less">
        <header id="header" class="inner">
            <a href="/" class="profilepic">
                <img src="/img/body.jpeg" class="animated zoomIn">
            </a>
            <hgroup>
              <h1 class="header-author"><a href="/" title="回到主页">donyyang</a></h1>
            </hgroup>
            
            <nav class="header-menu">
                <ul>
                
                    <li><a href="/">主页</a></li>
                
                    <li><a href="/archives/">所有文章</a></li>
                
                    <li><a href="/tags/">标签云</a></li>
                
                    <li><a href="/about/">关于我</a></li>
                
                <div class="clearfix"></div>
                </ul>
            </nav>
            <nav class="header-nav">
                        <ul class="social">
                            
                                <li id="Email"><a class="Email" target="_blank" href="mailto:123@123.com" title="Email"></a></li>
                            
                                <li id="GitHub"><a class="GitHub" target="_blank" href="#" title="GitHub"></a></li>
                            
                                <li id="RSS"><a class="RSS" target="_blank" href="/atom.xml" title="RSS"></a></li>
                            
                        </ul>
            </nav>
        </header>                
    </div>
</nav>
      <div class="body-wrap"><article id="post-微信小程序" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2016/10/12/微信小程序/" class="article-date">
      <time datetime="2016-10-12T03:24:00.000Z" itemprop="datePublished">2016-10-12</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      微信小程序
    </h1>
  

      </header>
      
      <div class="article-info article-info-post">
        

        
        <div class="clearfix"></div>
      </div>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <p>MINA&#x7A0B;&#x5E8F;&#x5305;&#x542B;&#x4E00;&#x4E2A;&#x63CF;&#x8FF0;&#x6574;&#x4F53;&#x7A0B;&#x5E8F;&#x7684;app&#x548C;&#x591A;&#x4E2A;&#x63CF;&#x8FF0;&#x5404;&#x81EA;&#x9875;&#x9762;&#x7684;page&#x3002;</p>
<h2 id="&#x8DDF;&#x666E;&#x901A;&#x9879;&#x76EE;&#x533A;&#x522B;&#xFF1A;"><a href="#&#x8DDF;&#x666E;&#x901A;&#x9879;&#x76EE;&#x533A;&#x522B;&#xFF1A;" class="headerlink" title="&#x8DDF;&#x666E;&#x901A;&#x9879;&#x76EE;&#x533A;&#x522B;&#xFF1A;"></a>&#x8DDF;&#x666E;&#x901A;&#x9879;&#x76EE;&#x533A;&#x522B;&#xFF1A;</h2><ul>
<li>(&#x6700;&#x591A;&#x53EF;&#x4EE5;&#x540C;&#x65F6;&#x8C03;&#x7528;5&#x4E2A;API&#xFF0C;&#x8DF3;&#x8F6C;5&#x4E2A;&#x9875;&#x9762;,&#x8C8C;&#x4F3C;&#x76EE;&#x524D;&#x4E0A;&#x4F20;&#x9879;&#x76EE;&#x5927;&#x5C0F;&#x4E3A;1M);</li>
<li>&#x6587;&#x4EF6;&#x540E;&#x7F00;js -&gt; js,html -&gt; wxml, css -&gt; wxss;</li>
<li>js: &#x5C0F;&#x7A0B;&#x5E8F;&#x4E0D;&#x652F;&#x6301;dom&#x548C;bom,&#x6240;&#x4EE5;js&#x4E2D;&#x76EE;&#x524D;&#x4E0D;&#x80FD;&#x51FA;&#x73B0;js&#x548C;&#x5176;&#x4ED6;&#x5F15;&#x7528;&#x7684;&#x6846;&#x67B6;&#x3002;&#x4F46;&#x662F;&#x5199;&#x6CD5;&#x548C;&#x666E;&#x901A;&#x9879;&#x76EE;&#x4E2D;&#x7684;js&#x7C7B;&#x4F3C;,&#x8C8C;&#x4F3C;js&#x4E2D;&#x6709;&#x7684;&#x529F;&#x80FD;&#x4E5F;&#x53EF;&#x4EE5;&#x7528;&#xFF0C;&#x89E3;&#x7801;&#x8F6C;&#x7801;&#x5C31;&#x53EF;&#x4EE5;&#x3002;</li>
<li>wxml: wxml&#x4E2D;&#x7684;&#x76EE;&#x524D;&#x80FD;&#x7528;&#x7684;&#x6807;&#x7B7E;&#x4E3A; view(div),image(img),text(span),input(text,number,idcard(&#x8EAB;&#x4EFD;&#x8BC1;&#x8F93;&#x5165;&#x952E;&#x76D8;),digit(&#x5E26;&#x5C0F;&#x6570;&#x70B9;&#x7684;&#x6570;&#x5B57;&#x952E;&#x76D8;),time,date,emoji(&#x5E26;&#x8868;&#x60C5;&#x7684;&#x8F93;&#x5165;&#x6846;),button,form,checkbox,radio,&#x7B49;&#x3002;&#x3002;&#x3002;&#x3002;&#x76EE;&#x524D;&#x53BB;&#x6389;&#x4E86;h1-h6,ul,textarea&#xFF08;&#x591A;&#x884C;&#x8F93;&#x5165;&#x73B0;&#x5728;&#x4E0D;&#x80FD;&#x5B9E;&#x73B0;&#xFF09;&#x3002;</li>
</ul>
<a id="more"></a>
<ul>
<li>wxss: <ul>
<li>&#x4EE5;flex&#x5E03;&#x5C40;&#x4E3A;&#x4E3B;&#xFF0C;&#x5927;&#x90E8;&#x5206;&#x6807;&#x7B7E;&#x90FD;&#x53EF;&#x4EE5;&#x7528;&#x3002;&#x9009;&#x62E9;&#x5668;&#x76EE;&#x524D;&#x652F;&#x6301;&#xFF1A;class,id,element,:before,:after&#x8FD9;&#x51E0;&#x79CD;&#xFF08;+ ~&#xFF09;&#x76EE;&#x524D;&#x4E0D;&#x80FD;&#x7528;&#xFF0C;weui&#x4E2D;text-size-adjust: 100%;(&#x662F;&#x89E3;&#x51B3; iPhone &#x6A2A;&#x5C4F;&#x65F6;&#x9ED8;&#x8BA4;&#x4F1A;&#x653E;&#x5927;&#x6587;&#x5B57;&#x7684;&#x95EE;&#x9898;)&#x6CA1;&#x7528;;</li>
<li>&#x5B57;&#x4F53;&#x65B0;&#x589E;&#x4E86;rpx&#xFF08;responsive pixel;<br><img src="/2016/10/12/&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;/page6.png" alt="logo"></li>
</ul>
</li>
</ul>
<p>&#x50CF;&#x7D20;&#x8DDF;&#x5206;&#x8FA8;&#x7387;&#x7684;&#x533A;&#x522B;&#xFF1A;<br>(PPI&#x5373;&#x6BCF;&#x82F1;&#x5BF8;&#x6240;&#x62E5;&#x6709;&#x7684;&#x50CF;&#x7D20;&#x6570;&#x76EE;)<br><img src="/2016/10/12/&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;/page7.png" alt="logo"></p>
<pre><code>*  &#x652F;&#x6301;&#x6837;&#x5F0F;&#x5BFC;&#x5165; @import &quot;common.wxss&quot;;
</code></pre><p>&#x4E3B;&#x7A0B;&#x5E8F;&#x5305;&#x542B;&#xFF1A;app.js,app.json,app.wxss;<br><img src="/2016/10/12/&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;/page1.png" alt="logo"></p>
<h2 id="app-js"><a href="#app-js" class="headerlink" title="app.js:"></a>app.js:</h2><p>  App()&#x51FD;&#x6570;&#x7528;&#x6765;&#x6CE8;&#x518C;&#x4E00;&#x4E2A;&#x5C0F;&#x7A0B;&#x5E8F;,&#x5728;&#x8FD9;&#x4E2A;&#x9875;&#x9762;&#x4E2D;&#x76D1;&#x542C;&#x5E76;&#x5904;&#x7406;&#x5C0F;&#x7A0B;&#x5E8F;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x3001;&#x58F0;&#x660E;&#x5168;&#x5C40;&#x53D8;&#x91CF;;</p>
<h4 id="1-&#x5C0F;&#x7A0B;&#x5E8F;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;-&#x5B98;&#x65B9;&#x6587;&#x6863;&#x622A;&#x56FE;&#xFF1A;"><a href="#1-&#x5C0F;&#x7A0B;&#x5E8F;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;-&#x5B98;&#x65B9;&#x6587;&#x6863;&#x622A;&#x56FE;&#xFF1A;" class="headerlink" title="1:&#x5C0F;&#x7A0B;&#x5E8F;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;,&#x5B98;&#x65B9;&#x6587;&#x6863;&#x622A;&#x56FE;&#xFF1A;"></a>1:&#x5C0F;&#x7A0B;&#x5E8F;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;,&#x5B98;&#x65B9;&#x6587;&#x6863;&#x622A;&#x56FE;&#xFF1A;</h4><p><img src="/2016/10/12/&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;/page2.png" alt="logo"></p>
<h4 id="2-&#x58F0;&#x660E;&#x5168;&#x5C40;&#x53D8;&#x91CF;-&#x5F53;&#x5728;&#x591A;&#x4E2A;&#x9875;&#x9762;&#x4E2D;&#x516C;&#x7528;&#x4E00;&#x4E2A;&#x53D8;&#x91CF;&#x65F6;&#xFF0C;&#x53EF;&#x4EE5;&#x5728;&#x6B64;&#x58F0;&#x660E;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x3002;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x53EF;&#x88AB;&#x58F0;&#x660E;&#x5728;&#x9875;&#x9762;&#x4E2D;&#x7684;"><a href="#2-&#x58F0;&#x660E;&#x5168;&#x5C40;&#x53D8;&#x91CF;-&#x5F53;&#x5728;&#x591A;&#x4E2A;&#x9875;&#x9762;&#x4E2D;&#x516C;&#x7528;&#x4E00;&#x4E2A;&#x53D8;&#x91CF;&#x65F6;&#xFF0C;&#x53EF;&#x4EE5;&#x5728;&#x6B64;&#x58F0;&#x660E;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x3002;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x53EF;&#x88AB;&#x58F0;&#x660E;&#x5728;&#x9875;&#x9762;&#x4E2D;&#x7684;" class="headerlink" title="2:&#x58F0;&#x660E;&#x5168;&#x5C40;&#x53D8;&#x91CF;:&#x5F53;&#x5728;&#x591A;&#x4E2A;&#x9875;&#x9762;&#x4E2D;&#x516C;&#x7528;&#x4E00;&#x4E2A;&#x53D8;&#x91CF;&#x65F6;&#xFF0C;&#x53EF;&#x4EE5;&#x5728;&#x6B64;&#x58F0;&#x660E;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x3002;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x53EF;&#x88AB;&#x58F0;&#x660E;&#x5728;&#x9875;&#x9762;&#x4E2D;&#x7684;"></a>2:&#x58F0;&#x660E;&#x5168;&#x5C40;&#x53D8;&#x91CF;:&#x5F53;&#x5728;&#x591A;&#x4E2A;&#x9875;&#x9762;&#x4E2D;&#x516C;&#x7528;&#x4E00;&#x4E2A;&#x53D8;&#x91CF;&#x65F6;&#xFF0C;&#x53EF;&#x4EE5;&#x5728;&#x6B64;&#x58F0;&#x660E;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x3002;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x53EF;&#x88AB;&#x58F0;&#x660E;&#x5728;&#x9875;&#x9762;&#x4E2D;&#x7684;</h4><p>&#x540C;&#x540D;&#x53D8;&#x91CF;&#x6240;&#x4EE3;&#x66FF;&#x3002;(&#x5C31;&#x50CF;css&#x4E2D;*{}&#x4E2D;&#x7684;&#x53EF;&#x88AB;&#x7C7B;&#x6216;ID&#x4E2D;&#x7684;&#x6837;&#x5F0F;&#x66FF;&#x6362;&#x4E00;&#x6837;)<br><img src="/2016/10/12/&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;/page3.png" alt="logo"></p>
<h2 id="app-json"><a href="#app-json" class="headerlink" title="app.json:"></a>app.json:</h2><p>  &#x662F;&#x5BF9;&#x6574;&#x4E2A;&#x5C0F;&#x7A0B;&#x5E8F;&#x7684;&#x5168;&#x5C40;&#x914D;&#x7F6E;,&#x5305;&#x62EC;&#x8DEF;&#x7531;&#xFF0C;&#x7A97;&#x53E3;&#x80CC;&#x666F;&#x8272;&#xFF0C;&#x5BFC;&#x822A;&#x6761;&#x6837;&#x5F0F;&#xFF0C;&#x9ED8;&#x8BA4;&#x6807;&#x9898;&#x3002;(&#x6B64;&#x9875;&#x9762;&#x4E0D;&#x53EF;&#x52A0;&#x6CE8;&#x91CA;)<br><img src="/2016/10/12/&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;/page4.png" alt="logo"><br>&#x6700;&#x591A;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;5&#x4E2A;tabBar&#xFF1B;<br>&#x6B64;&#x5916;&#x8FD8;&#x5305;&#x62EC;networkTimeout&#xFF1A;&#x8BBE;&#x7F6E;&#x7F51;&#x7EDC;&#x8D85;&#x65F6;&#x65F6;&#x95F4;&#xFF1B;debug:&#x662F;&#x5426;&#x663E;&#x793A;&#x8C03;&#x8BD5;&#x3002;<br>&#x5982;&#x679C;&#x5728;&#x5404;&#x4E2A;&#x9875;&#x9762;&#x4E2D;&#x6709;json,&#x4F1A;&#x8986;&#x76D6;&#x5168;&#x5267;&#x4E2D;&#x7684;app.json&#x5BF9;&#x5E94;&#x7684;&#x5185;&#x5BB9;(&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x6CA1;&#x4E2A;&#x9875;&#x9762;&#x9ED8;&#x8BA4;&#x663E;&#x793A;&#x7684;&#x6807;&#x9898;&#x7B49;) </p>
<h2 id="&#x5404;&#x4E2A;&#x9875;&#x9762;&#x7684;js-wxml-wxss-json"><a href="#&#x5404;&#x4E2A;&#x9875;&#x9762;&#x7684;js-wxml-wxss-json" class="headerlink" title="&#x5404;&#x4E2A;&#x9875;&#x9762;&#x7684;js,wxml,wxss,json"></a>&#x5404;&#x4E2A;&#x9875;&#x9762;&#x7684;js,wxml,wxss,json</h2><h2 id="js"><a href="#js" class="headerlink" title="js"></a>js</h2><p>  Page()&#x51FD;&#x6570;&#x7528;&#x6765;&#x6CE8;&#x518C;&#x4E00;&#x4E2A;&#x9875;&#x9762;,&#x6307;&#x5B9A;&#x9875;&#x9762;&#x7684;&#x521D;&#x59CB;&#x6570;&#x636E;&#x3001;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x3001;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x51FD;&#x6570;&#x7B49;;</p>
<p>&#x9875;&#x9762;&#x7684;&#x521D;&#x59CB;&#x6570;&#x636E;:</p>
<ul>
<li>data&#x6570;&#x636E;&#x6570;&#x636E;&#x5FC5;&#x987B;&#x662F;&#x53EF;&#x4EE5;&#x8F6C;&#x6210;JSON&#x7684;&#x683C;&#x5F0F;&#xFF1A;&#x5B57;&#x7B26;&#x4E32;&#xFF0C;&#x6570;&#x5B57;&#xFF0C;&#x5E03;&#x5C14;&#x503C;&#xFF0C;&#x5BF9;&#x8C61;&#xFF0C;&#x6570;&#x7EC4;&#x3002;</li>
</ul>
<p>&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#xFF1A;<br><img src="/2016/10/12/&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;/page5.png" alt="logo"></p>
<ul>
<li>onLoad:<ul>
<li>&#x53EF;&#x4EE5;&#x8C03;&#x7528;wx.request() (ajax);</li>
<li>&#x53EF;&#x4F20;&#x53C2;&#x6570;&#xFF0C;&#x53C2;&#x6570;&#x5C31;&#x662F;&#x5176;url&#x4E2D;&#x6240;&#x5E26;&#x7684;&#x53C2;&#x6570;&#x503C;<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"> &lt;!-- &#x6BD4;&#x5982;&#x5176;url&#x4E3A;http:baidu.com?d=<span class="number">8023</span>y=xx --&gt;</span><br><span class="line"> onLoad: <span class="function"><span class="keyword">function</span> (<span class="params">options</span>) </span>{</span><br><span class="line">  <span class="built_in">console</span>.log(options);</span><br><span class="line">}</span><br><span class="line">&lt;!-- &#x6253;&#x5370;&#x51FA;&#x6765;&#x4E3A; --&gt;</span><br><span class="line">{</span><br><span class="line">  d: <span class="number">8023</span>,</span><br><span class="line">  y: xx,</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<p>&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x51FD;&#x6570;</p>
<ul>
<li>&#x6BCF;&#x4E2A;&#x51FD;&#x6570;&#x90FD;&#x6709;&#x5176;&#x51FD;&#x6570;&#x4F5C;&#x7528;&#x57DF;&#xFF0C;&#x6240;&#x4EE5;&#x548C;&#x666E;&#x901A;js&#x51FD;&#x6570;&#x76F8;&#x4F3C;&#xFF0C;&#x5F97;&#x6CE8;&#x610F;this&#x95EE;&#x9898;&#x3002;</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- &#x5982;&#x540C;js&#x7684;&#x5C06;&#x4E8B;&#x4EF6;&#x76F4;&#x63A5;&#x7ED1;&#x5B9A;&#x5230;&#x5143;&#x7D20;&#x4E0A; --&gt;</span><br><span class="line">&lt;view id=<span class="string">&quot;tapTest&quot;</span> data-hi=<span class="string">&quot;MINA&quot;</span> bindtap=<span class="string">&quot;tapName&quot;</span>&gt; Click me! &lt;/view&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>&#x4E8B;&#x4EF6;&#x5206;&#x7C7B;<br>&#x6CA1;&#x6709;click&#xFF0C;&#x53EA;&#x6709;bindtap(&#x4E0D;&#x963B;&#x6B62;&#x4E8B;&#x4EF6;&#x5192;&#x6CE1;)&#xFF0C;catchtap(&#x963B;&#x6B62;&#x4E8B;&#x4EF6;&#x5192;&#x6CE1;)&#x4EE5;&#x53CA;&#x5982;&#x56FE;&#xFF1A;<br><img src="/2016/10/12/&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;/page8.png" alt="logo"></li>
<li>&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;<br>&#x6253;&#x5370;&#x51FA;&#x6765;&#x4E3A;&#xFF1A;<br><img src="/2016/10/12/&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;/page9.png" alt="logo"><br>&#x4EE5;bindtap&#x4E3A;&#x4F8B;&#xFF1A;</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">{&lt;!-- &#x4E8B;&#x4EF6;&#x7C7B;&#x578B; --&gt;</span><br><span class="line">  type: <span class="string">&apos;tap&apos;</span>,</span><br><span class="line">  &lt;!-- &#x751F;&#x6210;&#x65F6;&#x95F4;&#x7684;&#x65F6;&#x95F4;&#x6233; --&gt;</span><br><span class="line">  timeStamp: <span class="number">2890</span>,</span><br><span class="line">  &lt;!-- &#x89E6;&#x53D1;&#x65F6;&#x95F4;&#x7684;&#x7EC4;&#x4EF6;&#x7684;&#x4E00;&#x4E9B;&#x5C5E;&#x6027;&#x503C;&#x96C6;&#x5408;,&#x89E6;&#x53D1;&#x4E8B;&#x4EF6;&#x7684;&#x6E90;&#x7EC4;&#x4EF6; --&gt;</span><br><span class="line">  target: {},</span><br><span class="line">  &lt;!-- &#x5F53;&#x524D;&#x7EC4;&#x4EF6;&#x7684;&#x4E00;&#x4E9B;&#x5C5E;&#x6027;&#x503C;&#x96C6;&#x5408;&#xFF0C;&#x4E8B;&#x4EF6;&#x7ED1;&#x5B9A;&#x7684;&#x5F53;&#x524D;&#x7EC4;&#x4EF6; --&gt;</span><br><span class="line">  currentTarget: {}</span><br><span class="line">  &lt;!-- &#x989D;&#x5916;&#x7684;&#x4FE1;&#x606F;,&#x53EF;&#x83B7;&#x53D6;input&#x7684;&#x503C; --&gt;</span><br><span class="line">  detail: <span class="string">&apos;&apos;</span>,</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2016/10/12/&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;/page10.png" alt="logo"></p>
<h2 id="wxml-&#x5305;&#x62EC;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x3001;&#x6761;&#x4EF6;&#x6E32;&#x67D3;&#x3001;&#x5217;&#x8868;&#x6E32;&#x67D3;&#x3001;&#x6A21;&#x7248;&#x3001;&#x5F15;&#x7528;&#x3001;&#x5BFC;&#x822A;"><a href="#wxml-&#x5305;&#x62EC;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x3001;&#x6761;&#x4EF6;&#x6E32;&#x67D3;&#x3001;&#x5217;&#x8868;&#x6E32;&#x67D3;&#x3001;&#x6A21;&#x7248;&#x3001;&#x5F15;&#x7528;&#x3001;&#x5BFC;&#x822A;" class="headerlink" title="wxml &#x5305;&#x62EC;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x3001;&#x6761;&#x4EF6;&#x6E32;&#x67D3;&#x3001;&#x5217;&#x8868;&#x6E32;&#x67D3;&#x3001;&#x6A21;&#x7248;&#x3001;&#x5F15;&#x7528;&#x3001;&#x5BFC;&#x822A;"></a>wxml &#x5305;&#x62EC;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x3001;&#x6761;&#x4EF6;&#x6E32;&#x67D3;&#x3001;&#x5217;&#x8868;&#x6E32;&#x67D3;&#x3001;&#x6A21;&#x7248;&#x3001;&#x5F15;&#x7528;&#x3001;&#x5BFC;&#x822A;</h2><ul>
<li>&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#xFF1A;<br>&#x7C7B;&#x4F3C;react&#x548C;vue&#xFF0C;&#x4F7F;&#x7528;&#x5927;&#x62EC;&#x53F7;</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;view&gt; {{ message }} &lt;<span class="regexp">/view&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>&#x6761;&#x4EF6;&#x6E32;&#x67D3;</li>
</ul>
<p>&#x4EE3;&#x7801;<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;view wx:<span class="keyword">if</span>=<span class="string">&apos;{{ manageList.length == 0 }}&apos;</span>&gt;</span><br><span class="line">  &lt;view <span class="class"><span class="keyword">class</span> </span>= <span class="string">&quot;weui__cells&quot;</span>&gt;</span><br><span class="line">    &lt;view <span class="class"><span class="keyword">class</span> </span>= <span class="string">&quot;weui__cell&quot;</span>&gt;</span><br><span class="line">        &lt;text <span class="class"><span class="keyword">class</span> </span>= <span class="string">&quot;weui-cell__bd middle&quot;</span>&gt; &#x6682;&#x65E0;&#x6210;&#x5458; &lt;<span class="regexp">/text&gt;</span></span><br><span class="line"><span class="regexp">        &lt;text class = &quot;weui-cell__ft&quot;&gt;&lt;/</span>text&gt;</span><br><span class="line">    &lt;<span class="regexp">/view&gt;</span></span><br><span class="line"><span class="regexp">  &lt;/</span>view&gt;</span><br><span class="line">&lt;<span class="regexp">/view&gt;</span></span><br><span class="line"><span class="regexp">&lt;view wx:elif = &apos;{{}}&apos;&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>view&gt;</span><br><span class="line">&lt;view wx:<span class="keyword">else</span>&gt;</span><br><span class="line">  &lt;block wx:<span class="keyword">for</span>-items=<span class="string">&quot;{{ manageList }}&quot;</span>&gt;</span><br><span class="line">    &lt;view <span class="class"><span class="keyword">class</span> </span>= <span class="string">&quot;weui__cells&quot;</span> data-id = <span class="string">&quot;{{ item.userId }}&quot;</span>&gt;</span><br><span class="line">      &lt;view <span class="class"><span class="keyword">class</span> </span>= <span class="string">&quot;weui__cell&quot;</span>&gt;</span><br><span class="line">          &lt;image <span class="class"><span class="keyword">class</span> </span>= <span class="string">&quot;personImg&quot;</span> src = <span class="string">&quot;{{item.userHead}}&quot;</span> model = <span class="string">&quot;aspectFill&quot;</span>&gt;&lt;/image&gt;</span><br><span class="line">          &lt;text <span class="class"><span class="keyword">class</span> </span>= <span class="string">&quot;weui-cell__bd&quot;</span>&gt; {{ item.userName }} &lt;<span class="regexp">/text&gt;</span></span><br><span class="line"><span class="regexp">          &lt;text class = &quot;weui-cell__ft&quot;&gt;&lt;/</span>text&gt;</span><br><span class="line">      &lt;<span class="regexp">/view&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>view&gt;</span><br><span class="line">  &lt;<span class="regexp">/block&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>view&gt;</span><br></pre></td></tr></table></figure></p>
<ul>
<li>&#x5217;&#x8868;&#x6E32;&#x67D3;</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;block wx:<span class="keyword">for</span>-items=<span class="string">&quot;{{ manageList }}&quot;</span>&gt;</span><br><span class="line">  &lt;view <span class="class"><span class="keyword">class</span> </span>= <span class="string">&quot;weui__cells&quot;</span> data-id = <span class="string">&quot;{{ item.userId }}&quot;</span>&gt;</span><br><span class="line">    &lt;view <span class="class"><span class="keyword">class</span> </span>= <span class="string">&quot;weui__cell&quot;</span>&gt;</span><br><span class="line">        &lt;image <span class="class"><span class="keyword">class</span> </span>= <span class="string">&quot;personImg&quot;</span> src = <span class="string">&quot;{{item.userHead}}&quot;</span> model = <span class="string">&quot;aspectFill&quot;</span>&gt;&lt;/image&gt;</span><br><span class="line">        &lt;text <span class="class"><span class="keyword">class</span> </span>= <span class="string">&quot;weui-cell__bd&quot;</span>&gt; {{ item.userName }} &lt;<span class="regexp">/text&gt;</span></span><br><span class="line"><span class="regexp">        &lt;text class = &quot;weui-cell__ft&quot;&gt;&lt;/</span>text&gt;</span><br><span class="line">    &lt;<span class="regexp">/view&gt;</span></span><br><span class="line"><span class="regexp">  &lt;/</span>view&gt;</span><br><span class="line">&lt;<span class="regexp">/block&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>&#x5BFC;&#x822A; (&#x5206;&#x4E3A;&#x4E24;&#x79CD;&#xFF1A;&#x662F;&#x5426;&#x5173;&#x95ED;&#x5F53;&#x524D;&#x9875;&#x9762;&#xFF0C;&#x9ED8;&#x8BA4;&#x4E0D;&#x5173;&#x95ED;)<br>&#x5BFC;&#x822A;&#x53EF;&#x5199;&#x5728;wxml&#x4E2D;&#xFF0C;&#x4E5F;&#x53EF;&#x5199;&#x5728;js&#x4E2D;&#xFF1A;<ul>
<li>wxml:&#x4EE3;&#x7801;</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;block wx:<span class="keyword">for</span>-items=<span class="string">&quot;{{ actionSheetItems }}&quot;</span>&gt;</span><br><span class="line">  &lt;!-- &#x5982;&#x679C;&#x52A0;&#x4E0A;redirect&#x662F;&#x5173;&#x95ED;&#x5F53;&#x524D;&#x9875;&#x9762; --&gt;</span><br><span class="line">  &lt;navigator url = <span class="string">&quot;../../components/{{ item.page }}/{{ item.page }}&quot;</span>&gt;</span><br><span class="line">    &lt;!--&lt;action-sheet-item class = &quot;item&quot; bindtap=&quot;bind{{ item }}&quot;&gt;{{ item.name }}&lt;/action-sheet-item&gt;--&gt;</span><br><span class="line">    &lt;!-- &#x4ECE;&#x5C4F;&#x5E55;&#x5E95;&#x90E8;&#x51FA;&#x73B0;&#x7684;&#x5F39;&#x6846; --&gt;</span><br><span class="line">    &lt;action-sheet-item class = &quot;item&quot;&gt;{{ item.name }}&lt;/action-sheet-item&gt;</span><br><span class="line">  &lt;/navigator&gt;</span><br><span class="line">&lt;/block&gt;</span><br></pre></td></tr></table></figure>
<pre><code>*  js: &#x4EE3;&#x7801;
</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- &#x521B;&#x5EFA;&#x7684;&#x7FA4;&#xFF0C; --&gt;</span><br><span class="line">creatGroupVw: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line">  <span class="keyword">var</span> dataset = e.currentTarget.dataset;</span><br><span class="line">  <span class="comment">//wx.redirectTo&#x662F;&#x5173;&#x95ED;&#x5F53;&#x524D;&#x9875;&#x9762;</span></span><br><span class="line">  wx.navigateTo({</span><br><span class="line">    url: <span class="string">&apos;../singleInfo/singleInfo?infoId=&apos;</span>+dataset.id+<span class="string">&apos;&amp;createGroup=show&apos;</span>,</span><br><span class="line">  });</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<ul>
<li>&#x4E5F;&#x652F;&#x6301;&#x6A21;&#x7248;&#x548C;&#x5F15;&#x7528;</li>
</ul>
<h2 id="wxss"><a href="#wxss" class="headerlink" title="wxss"></a>wxss</h2><ul>
<li>&#x5982;&#x679C;&#x8DDF;app.wxss&#x91CD;&#x540D;&#x53EF;&#x8986;&#x76D6;app.wxss&#x91CC;&#x9762;&#x7684;&#x7C7B;&#x540D;&#x6216;id&#x540D;</li>
</ul>
<h2 id="json"><a href="#json" class="headerlink" title="json"></a>json</h2><p>&#x9875;&#x9762;&#x7684;.json&#x53EA;&#x80FD;&#x8BBE;&#x7F6E;window&#x76F8;&#x5173;&#x7684;&#x914D;&#x7F6E;&#x9879;&#xFF0C;&#x4EE5;&#x51B3;&#x5B9A;&#x672C;&#x9875;&#x9762;&#x7684;&#x7A97;&#x53E3;&#x8868;&#x73B0;&#xFF0C;&#x6240;&#x4EE5;&#x65E0;&#x9700;&#x5199;window&#x8FD9;&#x4E2A;&#x952E;</p>
<h2 id="&#x7EC4;&#x4EF6;"><a href="#&#x7EC4;&#x4EF6;" class="headerlink" title="&#x7EC4;&#x4EF6;"></a>&#x7EC4;&#x4EF6;</h2><ul>
<li>&#x89C6;&#x56FE;&#x5BB9;&#x5668;&#xFF1A; view&#x3001;scroll-view&#x3001;swiper<ul>
<li>scroll-view: &#x7ED1;&#x5B9A;bindscrolltoupper(&#x6ED1;&#x52A8;&#x5230;&#x9876;&#x90E8;&#x89E6;&#x53D1;)&#x3001;bindscrolltolower(&#x6ED1;&#x52A8;&#x5230;&#x5E95;&#x90E8;&#x89E6;&#x53D1;)&#x53EF;&#x5B9E;&#x73B0;&#x4E0B;&#x62C9;&#x52A0;&#x8F7D;&#xFF0C;&#x4E0A;&#x62C9;&#x5237;&#x65B0;(&#x9700;&#x7ED9;scroll-view&#x8BBE;&#x7F6E;&#x56FA;&#x5B9A;&#x7684;&#x9AD8;&#x5EA6;);<br>&#x4E0B;&#x62C9;&#x52A0;&#x8F7D;&#xFF1A;<br>&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x6570;&#x7EC4;&#xFF1B;&#x6BCF;&#x6B21;&#x8BF7;&#x6C42;&#x540E;&#x5C06;&#x6570;&#x636E;push&#x8FDB;&#x53BB;&#x3002;</li>
<li>swiper(&#x8F6E;&#x64AD;&#x56FE;)</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- indicator-dots&#xFF1A;&#x662F;&#x5426;&#x663E;&#x793A;&#x9762;&#x677F;&#x6307;&#x793A;&#x70B9;&#xFF1B;autoplay&#xFF1A;&#x662F;&#x5426;&#x81EA;&#x52A8;&#x5207;&#x6362;&#xFF1B;current&#xFF1A;&#x5F53;&#x524D;&#x6240;&#x5728;&#x9875;&#x9762;&#x7684;index</span><br><span class="line">      interval&#xFF1A;&#x81EA;&#x52A8;&#x5207;&#x6362;&#x65F6;&#x95F4;&#x95F4;&#x9694;&#xFF08;<span class="number">5000</span>&#xFF09;&#xFF1B;duration&#xFF1A;&#x6ED1;&#x52A8;&#x52A8;&#x753B;&#x65F6;&#x957F;&#xFF08;<span class="number">1000</span>&#xFF09;&#xFF1B;bindchange&#xFF1A;</span><br><span class="line">      current&#x6539;&#x53D8;&#x65F6;&#x4F1A;&#x89E6;&#x53D1;change&#x4E8B;&#x4EF6;&#xFF0C;event.detail={<span class="attr">current</span>:current} --&gt;</span><br><span class="line">&lt;!-- &#x5176;&#x4E2D;&#x53EA;&#x53EF;&#x653E;&#x7F6E;swiper-item&#x7EC4;&#x4EF6;&#xFF0C;&#x5176;&#x4ED6;&#x8282;&#x70B9;&#x4F1A;&#x88AB;&#x81EA;&#x52A8;&#x5220;&#x9664; --&gt;</span><br><span class="line">&lt;swpier indicator-dots=<span class="string">&quot;{{indicatorDots}}&quot;</span></span><br><span class="line">  autoplay=<span class="string">&quot;{{autoplay}}&quot;</span> interval=<span class="string">&quot;{{interval}}&quot;</span> duration=<span class="string">&quot;{{duration}}&quot;</span>&gt;</span><br><span class="line">  &lt;block wx:<span class="keyword">for</span>-items=<span class="string">&quot;{{imgUrls}}&quot;</span>&gt;</span><br><span class="line">    &lt;swpier-item&gt;</span><br><span class="line">      &lt;image src=<span class="string">&quot;{{item}}&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;slide-image&quot;</span> width=<span class="string">&quot;355&quot;</span> height=<span class="string">&quot;150&quot;</span>/&gt;</span><br><span class="line">    &lt;<span class="regexp">/swpier-item&gt;</span></span><br><span class="line"><span class="regexp">  &lt;/</span>block&gt;</span><br><span class="line">&lt;<span class="regexp">/swpier&gt;</span></span><br><span class="line"><span class="regexp">&lt;button bindtap=&quot;changeIndicatorDots&quot;&gt; indicator-dots &lt;/</span>button&gt;</span><br><span class="line">&lt;button bindtap=<span class="string">&quot;changeAutoplay&quot;</span>&gt; autoplay &lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;slider bindchange=&quot;intervalChange&quot; show-value min=&quot;500&quot; max=&quot;2000&quot;/</span>&gt; interval</span><br><span class="line">&lt;slider bindchange=<span class="string">&quot;durationChange&quot;</span> show-value min=<span class="string">&quot;1000&quot;</span> max=<span class="string">&quot;10000&quot;</span>/&gt; duration</span><br></pre></td></tr></table></figure>
<p><img src="/2016/10/12/&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;/page11.png" alt="logo"></p>
<ul>
<li>&#x57FA;&#x7840;&#x5185;&#x5BB9;</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- icon type&#x7C7B;&#x578B;&#xFF1A;success,success_no_circle,info,warn,waiting,cancel,download,search,clear</span><br><span class="line">size&#x63A7;&#x5236;&#x5927;&#x5C0F;&#xFF0C;color:&#x989C;&#x8272; --&gt;</span><br><span class="line">&lt;icon type=<span class="string">&quot;success&quot;</span> size=<span class="string">&quot;{{item}}&quot;</span> color=<span class="string">&quot;green&quot;</span>/&gt;</span><br><span class="line">&lt;!-- &#x8FDB;&#x5EA6;&#x6761;&#xFF1A;percent:&#x767E;&#x5206;&#x6BD4;<span class="number">0</span>~<span class="number">100</span>;showInfo:&#x5728;&#x8FDB;&#x5EA6;&#x6761;&#x53F3;&#x4FA7;&#x663E;&#x793A;&#x767E;&#x5206;&#x6BD4;;strokeWidth:&#x8FDB;&#x5EA6;&#x6761;&#x7EBF;&#x7684;&#x5BBD;&#x5EA6;&#xFF0C;&#x5355;&#x4F4D;px</span><br><span class="line">       color:&#x8FDB;&#x5EA6;&#x6761;&#x989C;&#x8272;;active:&#x8FDB;&#x5EA6;&#x6761;&#x4ECE;&#x5DE6;&#x5F80;&#x53F3;&#x7684;&#x52A8;&#x753B;;&#x9ED8;&#x8BA4;&#x503C;&#x5982;&#x4E0B; --&gt;</span><br><span class="line">&lt;progress percent=<span class="string">&quot;20&quot;</span> show-info=<span class="literal">false</span> strokeWidth=<span class="string">&apos;6px&apos;</span> color=<span class="string">&apos;#09BB07&apos;</span> active=<span class="literal">false</span> /&gt;</span><br></pre></td></tr></table></figure>
<p><img src="/2016/10/12/&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;/page12.png" alt="logo"><br><img src="/2016/10/12/&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;/page13.png" alt="logo"></p>
<ul>
<li>&#x8868;&#x5355;&#x7EC4;&#x4EF6;</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- &#x5305;&#x62EC;button,checkbox,form,input,label,picker(&#x6EDA;&#x52A8;&#x9009;&#x62E9;&#x5668;),radio,slider,<span class="keyword">switch</span> --&gt;</span><br><span class="line">&lt;!-- auto-focus:&#x81EA;&#x52A8;&#x5BF9;&#x7126;,bindchange&#xFF1A;&#x8F93;&#x5165;&#x6846;&#x5931;&#x53BB;&#x7126;&#x70B9;&#x65F6;&#xFF0C;&#x83B7;&#x53D6;&#x503C;event.detail.value ,</span><br><span class="line">      bindinput&#xFF1A;&#x952E;&#x76D8;&#x8F93;&#x5165;&#x65F6;&#x89E6;&#x53D1;--&gt;</span><br><span class="line">&lt;input placeholder=<span class="string">&quot;&quot;</span> auto-focus maxlength=<span class="number">140</span>, bindchange=<span class="string">&apos;bindchange&apos;</span> bindinput=<span class="string">&apos;bindinput&apos;</span> /&gt;</span><br><span class="line">&lt;!-- &#x6EDA;&#x52A8;&#x9009;&#x62E9;&#x5668; --&gt;</span><br><span class="line">&lt;!-- <span class="number">1</span>:&#x666E;&#x901A;</span><br><span class="line">        range(&#x53EA;&#x5728;modal=<span class="string">&apos;selector&apos;</span>&#x65F6;&#x6709;&#x6548;)&#xFF1A;&#x53EF;&#x5C06;&#x5730;&#x533A;&#x653E;&#x5230;&#x91CC;&#x9762;&#xFF1B;</span><br><span class="line">        value(modal&#x4E3A;selector&#x662F;&#x6570;&#x5B57;&#xFF0C;&#x8868;&#x793A;&#x4ECE;<span class="number">0</span>&#x5F00;&#x59CB;&#x9009;&#x4E2D;&#x7B2C;&#x51E0;&#x4E2A;&#xFF1B;</span><br><span class="line">        bindchange:value&#x6539;&#x53D8;&#x89E6;&#x53D1;&#xFF0C;e.detail.value) --&gt;</span><br><span class="line">&lt;view <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;section&quot;</span>&gt;</span><br><span class="line">    &lt;view <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;section__title&quot;</span>&gt;&#x5730;&#x533A;&#x9009;&#x62E9;&#x5668;&lt;<span class="regexp">/view&gt;</span></span><br><span class="line"><span class="regexp">    &lt;picker modal=&apos;selector&apos; bindchange=&quot;bindPickerChange&quot; value=&quot;{{index}}&quot; range=&quot;{{array}}&quot;&gt;</span></span><br><span class="line"><span class="regexp">        &lt;view class=&quot;picker&quot;&gt;</span></span><br><span class="line"><span class="regexp">            &#x5F53;&#x524D;&#x9009;&#x62E9;&#xFF1A;{{array[index]}}</span></span><br><span class="line"><span class="regexp">        &lt;/</span>view&gt;</span><br><span class="line">    &lt;<span class="regexp">/picker&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>view&gt;</span><br><span class="line">&lt;!-- <span class="number">2</span>:&#x65F6;&#x95F4; --&gt;</span><br><span class="line">&lt;view <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;section&quot;</span>&gt;</span><br><span class="line">    &lt;view <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;section__title&quot;</span>&gt;&#x65F6;&#x95F4;&#x9009;&#x62E9;&#x5668;&lt;<span class="regexp">/view&gt;</span></span><br><span class="line"><span class="regexp">    &lt;picker mode=&quot;time&quot; value=&quot;{{time}}&quot; start=&quot;09:01&quot; end=&quot;21:01&quot; bindchange=&quot;bindTimeChange&quot;&gt;</span></span><br><span class="line"><span class="regexp">        &lt;view class=&quot;picker&quot;&gt;</span></span><br><span class="line"><span class="regexp">            &#x5F53;&#x524D;&#x9009;&#x62E9;: {{time}}</span></span><br><span class="line"><span class="regexp">        &lt;/</span>view&gt;</span><br><span class="line">    &lt;<span class="regexp">/picker&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>view&gt;</span><br><span class="line">&lt;!-- <span class="number">3</span>:&#x65E5;&#x671F; --&gt;</span><br><span class="line">&lt;view <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;section&quot;</span>&gt;</span><br><span class="line">    &lt;view <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;section__title&quot;</span>&gt;&#x65E5;&#x671F;&#x9009;&#x62E9;&#x5668;&lt;<span class="regexp">/view&gt;</span></span><br><span class="line"><span class="regexp">    &lt;picker mode=&quot;date&quot; value=&quot;{{date}}&quot; start=&quot;2015-09-01&quot; end=&quot;2017-09-01&quot; bindchange=&quot;bindDateChange&quot;&gt;</span></span><br><span class="line"><span class="regexp">        &lt;view class=&quot;picker&quot;&gt;</span></span><br><span class="line"><span class="regexp">            &#x5F53;&#x524D;&#x9009;&#x62E9;: {{date}}</span></span><br><span class="line"><span class="regexp">        &lt;/</span>view&gt;</span><br><span class="line">    &lt;<span class="regexp">/picker&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>view&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">Page({</span><br><span class="line">  data: {</span><br><span class="line">    array:[<span class="string">&quot;&#x7F8E;&#x56FD;&quot;</span>,<span class="string">&quot;&#x4E2D;&#x56FD;&quot;</span>,<span class="string">&quot;&#x5DF4;&#x897F;&quot;</span>,<span class="string">&quot;&#x65E5;&#x672C;&quot;</span>],</span><br><span class="line">    index:<span class="number">0</span>,</span><br><span class="line">    date:<span class="string">&quot;2016-09-01&quot;</span>,</span><br><span class="line">    time:<span class="string">&quot;12:01&quot;</span></span><br><span class="line">  },</span><br><span class="line">  bindPickerChange: <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&apos;picker&#x53D1;&#x9001;&#x9009;&#x62E9;&#x6539;&#x53D8;&#xFF0C;&#x643A;&#x5E26;&#x503C;&#x4E3A;&apos;</span>, e.detail.value)</span><br><span class="line">    <span class="keyword">this</span>.setData({</span><br><span class="line">      index: e.detail.value</span><br><span class="line">    })</span><br><span class="line">  },</span><br><span class="line">  bindDateChange:<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line">    <span class="keyword">this</span>.setData({</span><br><span class="line">      date:e.detail.value</span><br><span class="line">    })</span><br><span class="line">  },</span><br><span class="line">  bindTimeChange:<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line">    <span class="keyword">this</span>.setData({</span><br><span class="line">      time:e.detail.time</span><br><span class="line">    })</span><br><span class="line">  }</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<ul>
<li><p>&#x64CD;&#x4F5C;&#x53CD;&#x9988;&#xFF1A;action-sheet(&#x4ECE;&#x5C4F;&#x5E55;&#x5E95;&#x90E8;&#x51FA;&#x73B0;&#x7684;&#x83DC;&#x5355;&#x8868;),modal,toast(&#x200B;&#x6D88;&#x606F;&#x63D0;&#x793A;&#x6846;),loading</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&lt;!-- &#x90FD;&#x662F;&#x901A;&#x8FC7;hidden&#x6765;&#x63A7;&#x5236;&#x9690;&#x85CF;&#x8FD8;&#x662F;&#x663E;&#x793A; --&gt;</span><br><span class="line">&lt;action-sheet hidden=<span class="string">&quot;{{actionSheetHidden}}&quot;</span> bindchange=<span class="string">&quot;actionSheetChange&quot;</span>&gt;</span><br><span class="line">    &lt;block wx:<span class="keyword">for</span>-items=<span class="string">&quot;{{actionSheetItems}}&quot;</span>&gt;</span><br><span class="line">        &lt;action-sheet-item <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;item&quot;</span> bindtap=<span class="string">&quot;bind{{item}}&quot;</span>&gt;{{item}}&lt;<span class="regexp">/action-sheet-item&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>block&gt;</span><br><span class="line">    &lt;action-sheet-cancel <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;cancel&quot;</span>&gt;&#x53D6;&#x6D88;&lt;<span class="regexp">/action-sheet-cancel&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>action-sheet&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>&#x5A92;&#x4F53;&#x7EC4;&#x4EF6;&#xFF1A;audio,image,video</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- poster&#xFF1A;&#x9ED8;&#x8BA4;&#x63A7;&#x4EF6;&#x4E0A;&#x7684;&#x97F3;&#x9891;&#x5C01;&#x9762;&#x7684;&#x56FE;&#x7247;&#x8D44;&#x6E90;&#x5730;&#x5740;&#xFF1B;</span><br><span class="line">     action&#xFF1A;&#x63A7;&#x5236;&#x97F3;&#x9891;&#x7684;&#x64AD;&#x653E;&#x3001;&#x6682;&#x505C;&#xFF0C;&#x64AD;&#x653E;&#x901F;&#x7387;&#x3001;&#x64AD;&#x653E;&#x8FDB;&#x5EA6;&#x7684;&#x5BF9;&#x8C61;&#xFF0C;&#x6709;method&#x548C;data&#x4E24;&#x4E2A;&#x53C2;&#x6570;</span><br><span class="line">     controls&#xFF1A;&#x662F;&#x5426;&#x663E;&#x793A;&#x9ED8;&#x8BA4;&#x63A7;&#x4EF6;&#x3002;&#x3002;&#x3002;&#x7B49; --&gt;</span><br><span class="line">&lt;audio poster=<span class="string">&quot;{{poster}}&quot;</span> name=<span class="string">&quot;{{name}}&quot;</span> author=<span class="string">&quot;{{author}}&quot;</span> src=<span class="string">&quot;{{ src }}&quot;</span> action=<span class="string">&quot;{{action}}&quot;</span> controls loop&gt;&lt;/audio&gt;</span><br><span class="line">&lt;!-- mode:&#x56FE;&#x7247;&#x88C1;&#x526A;&#x3001;&#x7F29;&#x653E;&#x7684;&#x6A21;&#x5F0F; <span class="number">13</span> --&gt;</span><br><span class="line">&lt;image style=<span class="string">&quot;width: 200px; height: 200px; background-color: #eeeeee;&quot;</span> mode=<span class="string">&quot;{{item.mode}}&quot;</span> src=<span class="string">&quot;{{src}}&quot;</span>&gt;&lt;/image&gt;</span><br></pre></td></tr></table></figure>
<p><img src="/2016/10/12/&#x5FAE;&#x4FE1;&#x5C0F;&#x7A0B;&#x5E8F;/page14.png" alt="logo"></p>
<ul>
<li>&#x5730;&#x56FE;&#x548C;&#x753B;&#x5E03; map,canvas</li>
</ul>
<h2 id="api"><a href="#api" class="headerlink" title="api"></a>api</h2><p>(&#x6700;&#x591A;&#x53EF;&#x4EE5;&#x540C;&#x65F6;&#x8C03;&#x7528;5&#x4E2A;API);<br>&#x6700;&#x5E38;&#x7528;&#x7684;&#x4E3A;&#xFF1A;wx.request();</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">wx.request({</span><br><span class="line">  url: app.globalData.HOST_URI+<span class="string">&apos;/msg/list&apos;</span>,</span><br><span class="line">  data: {</span><br><span class="line">    cpage: page,</span><br><span class="line">    pagesize: <span class="number">5</span>,</span><br><span class="line">    userId: app.globalData.userId,</span><br><span class="line">  },</span><br><span class="line">  method: <span class="string">&quot;GET&quot;</span>,</span><br><span class="line">  success: <span class="function"><span class="keyword">function</span> (<span class="params">res</span>) </span>{</span><br><span class="line">    <span class="keyword">var</span> data = res.data.data.content;</span><br><span class="line">    </span><br><span class="line">    data.map(<span class="function"><span class="keyword">function</span> (<span class="params">item, index</span>) </span>{</span><br><span class="line">      <span class="keyword">var</span> createDate = that.changeDate(<span class="keyword">new</span> <span class="built_in">Date</span>(item.msgSendTime)),</span><br><span class="line">          changeIsRead = that.changeRead(item.isRead);</span><br><span class="line">      item.msgSendTime = createDate.slice(<span class="number">5</span>,<span class="number">11</span>);</span><br><span class="line">      <span class="comment">// &#x628A;gmtCreate&#x8F6C;&#x6362;&#x4E3A;&#x4E86;msgSendTime,&#x628A;gmtModify&#x6539;&#x4E3A;createDate</span></span><br><span class="line">      item.gmtCreate = createDate.slice(<span class="number">0</span>,<span class="number">11</span>);</span><br><span class="line">      item.gmtModify = createDate;</span><br><span class="line">      item.isRead = changeIsRead;</span><br><span class="line">      dataList.push(item);</span><br><span class="line">    });</span><br><span class="line">    </span><br><span class="line">    that.setData({</span><br><span class="line">      articleDatas: dataList,</span><br><span class="line">      loadHidden: <span class="literal">true</span>,</span><br><span class="line">      eachData: data,</span><br><span class="line">    });</span><br><span class="line">  },</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>&#x9664;&#x4E86;&#x5728;&#x6BCF;&#x4E2A;json&#x4E2D;&#x8BBE;&#x7F6E;window&#x9875;&#x9762;&#x3002;&#x8FD8;&#x53EF;&#x4EE5;&#x5728;js&#x7684;onReady&#x4E2D;&#x8BBE;&#x7F6E;</p>
<h2 id="&#x9047;&#x5230;&#x7684;&#x95EE;&#x9898;"><a href="#&#x9047;&#x5230;&#x7684;&#x95EE;&#x9898;" class="headerlink" title="&#x9047;&#x5230;&#x7684;&#x95EE;&#x9898;"></a>&#x9047;&#x5230;&#x7684;&#x95EE;&#x9898;</h2><ul>
<li>&#x4E0D;&#x8BF7;&#x6C42;ajax&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x4ECE;&#x5217;&#x8868;&#x9875;&#x8DF3;&#x8F6C;&#x5230;&#x5355;&#x4E2A;&#x8BE6;&#x60C5;&#x9875;&#x3002;<br>&#x89E3;&#x51B3;&#xFF1A;&#x5229;&#x7528;&#x4E86;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x53CA;e.currentTarget.dataset</li>
<li>&#x91CD;&#x65B0;&#x52A0;&#x8F7D;&#x9875;&#x9762;&#xFF1A;(&#x4ECE;&#x4E00;&#x4E2A;&#x6708;&#x9762;&#x8DF3;&#x8F6C;&#x5230;&#x53E6;&#x4E00;&#x4E2A;&#x9875;&#x9762;&#x518D;&#x53CD;&#x6094;&#x5F53;&#x524D;&#x9875;&#x9762;&#x91CD;&#x65B0;&#x52A0;&#x8F7D;&#x6570;&#x636E;)<br> &#x89E3;&#x51B3;&#xFF1A;&#x70B9;&#x51FB;&#x8DF3;&#x8F6C;&#x65F6;&#x91CD;&#x65B0; low &#x4E86;&#x4E00;&#x6B21;&#x6570;&#x636E;(&#x5DF2;&#x8BFB;&#x672A;&#x8BFB;)&#x3002;</li>
<li>&#x4FEE;&#x6539;input&#x6846;&#x4E2D;&#x7684;&#x5185;&#x5BB9;<br> &#x89E3;&#x51B3;&#xFF1A;&#x8BBE;&#x7F6E;&#x4E86;&#x4E24;&#x4E2A;input&#x6846;&#xFF0C;&#x4E00;&#x4E2A;&#x662F;&#x4ECE;data&#x53D6;&#x5230;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x4E00;&#x4E2A;&#x662F;&#x4FEE;&#x6539;&#x540E;&#x7684;&#x6570;&#x636E;&#x3002;&#x4FEE;&#x6539;&#x540E;&#x8BA9;&#x7B2C;&#x4E00;&#x4E2A;&#x9690;&#x85CF;&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;&#x51FA;&#x73B0;</li>
<li>&#x663E;&#x793A;&#x7FA4;&#x8D44;&#x6599;&#x65F6;&#x533A;&#x5206;&#x662F;&#x5426;&#x662F;&#x81EA;&#x5DF1;&#x521B;&#x5EFA;&#x7684;&#xFF1A;<br> &#x89E3;&#x51B3;&#xFF1A;url&#x4F20;&#x4E86;&#x4E24;&#x6B21;&#x503C;</li>
<li>&#x5176;&#x4ED6; &#x4E0A;&#x62C9;&#x52A0;&#x8F7D;&#x66F4;&#x591A;&#xFF0C;&#x8F6C;&#x7801;&#x89E3;&#x7801;&#x7B49;</li>
</ul>

      
    </div>
    
  </div>
  
    
    <div class="copyright">
        <p><span>本文标题:</span><a href="/2016/10/12/微信小程序/">微信小程序</a></p>
        <p><span>文章作者:</span><a href="/" title="访问 donyyang 的个人博客">donyyang</a></p>
        <p><span>发布时间:</span>2016年10月12日 - 11时24分</p>
        <p><span>最后更新:</span>2016年10月14日 - 09时08分</p>
        <p>
            <span>原始链接:</span><a class="post-url" href="/2016/10/12/微信小程序/" title="微信小程序">http://yoursite.com/2016/10/12/微信小程序/</a>
            <span class="copy-path" data-clipboard-text="原文: http://yoursite.com/2016/10/12/微信小程序/　　作者: donyyang" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
            <script src="/js/clipboard.min.js"></script>
            <script> var clipboard = new Clipboard('.copy-path'); </script>
        </p>
        <p>
            <span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" title="中国大陆 (CC BY-NC-SA 3.0 CN)" target = "_blank">"署名-非商用-相同方式共享 3.0"</a> 转载请保留原文链接及作者。
        </p>
    </div>



    <nav id="article-nav">
        
        
            <div id="article-nav-older" class="article-nav-title">
                <a href="/2016/09/16/作用域链、闭包及其它/">
                    作用域链、闭包及其它
                </a>
            </div>
        
    </nav>

  
</article>

    <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录</strong>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#跟普通项目区别："><span class="toc-number">1.</span> <span class="toc-text">跟普通项目区别：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#app-js"><span class="toc-number">2.</span> <span class="toc-text">app.js:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-小程序的生命周期函数-官方文档截图："><span class="toc-number">2.0.1.</span> <span class="toc-text">1:小程序的生命周期函数,官方文档截图：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-声明全局变量-当在多个页面中公用一个变量时，可以在此声明全局变量。全局变量可被声明在页面中的"><span class="toc-number">2.0.2.</span> <span class="toc-text">2:声明全局变量:当在多个页面中公用一个变量时，可以在此声明全局变量。全局变量可被声明在页面中的</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#app-json"><span class="toc-number">3.</span> <span class="toc-text">app.json:</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#各个页面的js-wxml-wxss-json"><span class="toc-number">4.</span> <span class="toc-text">各个页面的js,wxml,wxss,json</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#js"><span class="toc-number">5.</span> <span class="toc-text">js</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#wxml-包括数据绑定、条件渲染、列表渲染、模版、引用、导航"><span class="toc-number">6.</span> <span class="toc-text">wxml 包括数据绑定、条件渲染、列表渲染、模版、引用、导航</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#wxss"><span class="toc-number">7.</span> <span class="toc-text">wxss</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#json"><span class="toc-number">8.</span> <span class="toc-text">json</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#组件"><span class="toc-number">9.</span> <span class="toc-text">组件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#api"><span class="toc-number">10.</span> <span class="toc-text">api</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#遇到的问题"><span class="toc-number">11.</span> <span class="toc-text">遇到的问题</span></a></li></ol>
</div>
<style>
    .left-col .switch-btn {
        display: none;
    }
    .left-col .switch-area {
        display: none;
    }
</style>

<input type="button" id="tocButton" value="隐藏目录"  title="点击按钮隐藏或者显示文章目录">
<script>
    var valueHide = "隐藏目录";
    var valueShow = "显示目录";

    if ($(".left-col").is(":hidden")) {
        $("#tocButton").attr("value", valueShow);
    }

    $("#tocButton").click(function() {
        if ($("#toc").is(":hidden")) {
            $("#tocButton").attr("value", valueHide);
            $("#toc").slideDown(320);
            $(".switch-btn, .switch-area").fadeOut(300);
        }
        else {
            $("#tocButton").attr("value", valueShow);
            $("#toc").slideUp(350);
            $(".switch-btn, .switch-area").fadeIn(500);
        }
    })

    if ($(".toc").length < 1) {
        $("#toc, #tocButton").hide();
        $(".switch-btn, .switch-area").show();
    }
</script>




    <div class="share">
    <div class="bdsharebuttonbox">
    <a href="#" class="bds_more" data-cmd="more"></a>
    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
    <a href="#" class="bds_sqq" data-cmd="sqq" title="分享给 QQ 好友"></a>
    <a href="#" class="bds_copy" data-cmd="copy" title="复制网址"></a>
    <a href="#" class="bds_mail" data-cmd="mail" title="通过邮件分享"></a>
    <a href="#" class="bds_weixin" data-cmd="weixin" title="生成文章二维码"></a>
    </div>
    <script>
        window._bd_share_config={
            "common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
    </script>
</div>



    
      <div class="duoshuo" id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="2016/10/12/微信小程序/" data-title="微信小程序" data-url="http://yoursite.com/2016/10/12/微信小程序/"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:"dony"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
    <!-- 多说公共JS代码 end -->
</div>

    




    <div class="scroll" id="post-nav-button">
        
            <a href="/" title="回到主页"><i class="fa fa-home"></i></a>
        

        <a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>

        
            <a href="/2016/09/16/作用域链、闭包及其它/" title="下一篇: 作用域链、闭包及其它">
                <i class="fa fa-angle-right"></i>
            </a>
        
    </div>

    <ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2016/10/12/微信小程序/">微信小程序</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/09/16/作用域链、闭包及其它/">作用域链、闭包及其它</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/08/24/webpack的基本用法/">webpack基础</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/08/13/上传到github上/">将本的的文件上传到github上</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/03/17/hello-world/">Hello World</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/03/17/my-first-blog/">my first blog</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/03/17/js-3种排序算法/">js-3种排序算法</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/03/17/em的用法/">em的用法</a></li></ul>




    <script>
        
    </script>
</div>
      <footer id="footer">
    <div class="outer">
        <div id="footer-info">
            <div class="footer-left">
                &copy; 2018 donyyang
            </div>
            <div class="footer-right">
                <a href="http://hexo.io/" target="_blank" title="快速、简洁且高效的静态博客框架">Hexo</a>  Theme <a href="https://github.com/MOxFIVE/hexo-theme-yelee" target="_blank" title="简而不减双栏 Hexo 博客主题">Yelee</a> by MOxFIVE
            </div>
        </div>
        
            <div class="visit">
                
                    <span id="busuanzi_container_site_pv" style='display:none'>
                        <span id="site-visit" >本站到访数: 
                            <span id="busuanzi_value_site_uv"></span>
                        </span>
                    </span>
                
                
                    <span>, </span>
                
                
                    <span id="busuanzi_container_page_pv" style='display:none'>
                        <span id="page-visit">本页阅读量: 
                            <span id="busuanzi_value_page_pv"></span>
                        </span>
                    </span>
                
            </div>
        
    </div>
</footer>
    </div>
    
<script data-main="/js/main.js" src="//cdn.bootcss.com/require.js/2.1.22/require.min.js"></script>

    <script>
        $(document).ready(function() {
            var iPad = window.navigator.userAgent.indexOf('iPad');
            if (iPad > -1 || $(".left-col").css("display") === "none") {
                var bgColorList = ["#9db3f4", "#414141", "#e5a859", "#f5dfc6", "#c084a0", "#847e72", "#cd8390", "#996731"];
                var bgColor = Math.ceil(Math.random() * (bgColorList.length - 1));
                $("body").css({"background-color": bgColorList[bgColor], "background-size": "cover"});
            }
            else {
                var backgroundnum = 5;
                var backgroundimg = "url(/background/bg-x.jpg)".replace(/x/gi, Math.ceil(Math.random() * backgroundnum));
                $("body").css({"background": backgroundimg, "background-attachment": "fixed", "background-size": "cover"});
            }
        })
    </script>




<div class="scroll" id="scroll">
    <a href="#" title="返回顶部"><i class="fa fa-arrow-up"></i></a>
    <a href="#comments" title="查看评论"><i class="fa fa-comments-o"></i></a>
    <a href="#footer" title="转到底部"><i class="fa fa-arrow-down"></i></a>
</div>

    <script src="//cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
  </div>
</body>
</html>